// import React from "react";

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 1,
//     }
//     // this.add = this.add.bind(this)
//   }
//   add(e, a, b) {
//     // console.log(this);
//     console.log(e, a, b);
//   }
//   render() {
//     console.log("render...");  // 两次
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件</h1>
//         <h2>{num}</h2>
//         {/* <button onClick={this.add.bind(this, "1", "2")}>+1</button> */}
//         {/* <button onClick={this.add}>+1</button> */}
//         {/* <button onClick={(e) => this.add(e)}>+1</button> */}
//         <button onClick={e => this.add(e, "1", "2")}>+1</button>
//       </div>
//     )
//   }
// }

// export default DemoA

// ----------------------------------------

import { useState } from "react"

function DemoA() {
  let [num, setNum] = useState(1)
  // todo.push, splice, pop, shift, unshift  7大个方法
  let [todo, setTodo] = useState([])

  let add = () => {
    // console.log("---1:", num);
    // // setNum是异步的
    // setNum(num + 1)
    // console.log("---2:", num);

    // num++ 直接修改状态
    // 又通过setNum间接修改状态
    // 数据不可变
    // setNum(num++)

    // setNum(++num)

    // 数据不可变
    // setTodo(todo.push())

    // 格式1： setNum(操作老状态)
    // 新状态和老状态无关时，使用格式1
    // setNum(num + 1)

    // 格式2： setNum(_=>_+1)
    // 新状态和老状态有关时，使用格式2
    // setNum(num => num + 1)
    setNum(_ => _ + 1)
  }

  return (
    <div>
      <h1>{num}</h1>
      <button onClick={add}>+1</button>
    </div>
  )
}

export default DemoA
